<template>
  <div class="content">
    <div class="willsale">
      <ul >
        <li class="coupon-list2">
          <div class="li-div2">
            <div class="c-left2">
              <div><img src="./images/mx.png"></div>
            </div>
            <div class="c-mid2">
              <h2>郎酒新品预售抵扣券</h2>
              <div class="price">59抵100元券</div>
              <div class="startsale">4月28开售</div>
            </div>
            <div class="c-right2">
              <span class="hasget"><img src="./images/ylq-red.svg" ></span>
              <span class="goUse">去使用</span>
            </div>
            <div class="line"></div>
          </div>
        </li>
        <li class="coupon-list">
          <div class="li-div">
            <div class="c-left">
              <div><img src="./images/mx.png"></div>
            </div>
            <div class="c-mid">
              <h2>郎酒新品预售抵扣券</h2>
              <div class="price">59抵100元券</div>
              <div class="startsale">4月28开售</div>
            </div>
            <div class="c-right">
              <span class="jindu">已抢80%</span>
              <progress value="30" max="100" class="pro-wh"></progress>
              <!--<mt-progress class="progre" :value="20" :bar-height="5"></mt-progress>-->
              <span class="getcoupon">立即领券</span>
            </div>
            <div class="line"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {};
    },
    mounted(){

    },
    methods: {},
    filters: {}
  }
</script>


<style scoped>

  .pro-wh {
    width: 94%;
    height: .25rem;
    margin-bottom: .2rem;
  }

  progress {
    background-color: #ececec;
  }

  progress::-webkit-progress-bar {
    background-color: #ececec;
  }

  progress::-webkit-progress-value {
    background-color: #F74C4E;
  }

  .content {
    text-align: center;
    background: #fff;
  }

  .willsale {
    overflow: hidden;
  }

  .coupon-list {
    text-align: left;
    margin: .5rem;
    overflow: hidden;
  }

  .coupon-list .li-div {
    height: 5rem;
    width: 100%;
    background: #fff;
    padding: 10px;
    /*margin-bottom:.5rem;*/
    position: relative;
    display: flex;
    border-radius: 1px;
    border: 1px solid #eee;
  }

  .c-left {
    /*width:24%;*/
    /*float:left;*/
    text-align: center;
    width: 4rem;
  }

  .c-left div {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    /*background:url(images/imgbg.svg) 0 0 no-repeat;*/
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .c-left img {
    width: 100%;
  }

  .c-mid {
    padding-left: .4rem;
    padding-right: .4rem;
    flex: 1;
  }

  .c-mid h2 {
    font-weight: normal;
    font-size: .75rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid .price {
    font-size: .7rem;
    color: #E93B3D;
    margin-top: 1rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid .startsale {
    font-size: .5rem;
    color: #777;
  }

  .c-right {
    width: 4.5rem;
  }

  .jindu {
    font-size: .6rem;
    color: #777;
  }

  /*progress {*/
  /*width: 100%;*/
  /*height: .2rem;*/
  /*margin: .5rem 0;*/
  /*}*/

  .getcoupon {
    font-size: .55rem;
    margin-top: .75rem;
    padding: .25rem .75rem;
    color: #fff;
    background: #E93B3D;
    border-radius: 100px;
  }

  .line {
    position: absolute;
    width: 0;
    height: 100%;
    border-left: 1px dashed #eee;
    right: 5.5rem;
    top: 0;
  }

  .line:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #eee;
    transform: rotate(-135deg);
    border-bottom: 0;
    position: absolute;
    top: -7px;
    left: -8px;
    z-index: 2;
  }

  .line:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #eee;
    transform: rotate(-135deg);
    border-top: 0;
    position: absolute;
    bottom: -7px;
    left: -8px;
    z-index: 2;
  }

  .coupon-list2 {
    text-align: left;
    margin: .5rem;
    overflow: hidden;
  }

  .coupon-list2 .li-div2 {
    height: 5rem;
    width: 100%;
    background: #fff;
    /*margin-bottom:.5rem;*/
    position: relative;
    display: flex;
    border-radius: 2px;
    border: 1px solid #eee;
  }

  .c-left2 {
    /*width:24%;*/
    /*float:left;*/
    text-align: center;
    width: 4rem;
    padding: .5rem;
  }

  .c-left2 div {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    /*background:url(images/imgbg.svg) 0 0 no-repeat;*/
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }

  .c-left2 img {
    width: 100%;
  }

  .c-mid2 {
    padding: .5rem .4rem;
    flex: 1;
    margin-left: .25rem;
  }

  .c-mid2 h2 {
    font-weight: normal;
    font-size: .75rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid2 .price {
    font-size: .7rem;
    color: #E93B3D;
    margin-top: 1rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .c-mid2 .startsale {
    font-size: .5rem;
    color: #777;
  }

  .c-right2 {
    width: 5.5rem;
    background:#ffecec ;
  }

  .c-right2 .hasget {
    position: absolute;
    right: 0;
    top: 0;
  }

  .c-right2 .goUse{
    width: 4rem;
    padding: .15rem 0;
    text-align: center;
    position: absolute;
    font-size: .65rem;
    color: #F74C4E;
    border: 1px solid #F74C4E;
    border-radius: 100px;
    bottom: 1rem;
    right: .75rem;
  }

</style>
